<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">文件汇总</div>
        </div>
        <div class="info-wrap fxn-margin-b-20">
            <el-table v-loading="loading" :data="notesData">
                <el-table-column label="文件来源" prop="action" />
                <el-table-column label="文件名称" prop="files">
                    <template #default="scope">
                        {{changeFile(scope.row.files)}}
                    </template>
                </el-table-column>
                <el-table-column label="创建人" prop="create_with" />
                <el-table-column label="创建时间" prop="create_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.create_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="附件">
                    <template #default="scope">
                        <i v-if="formatFiles(scope.row.files) == 'jpg' || formatFiles(scope.row.files) == 'png'" class="iconfont icon-picture fxn-ft-24" @click="handleFile(scope.row.files.xurl)"></i>
                        <i v-if="formatFiles(scope.row.files) == 'pdf'" class="iconfont icon-pdf fxn-ft-24" @click="handleFile(scope.row.files.xurl)"></i>
                        <i v-if="formatFiles(scope.row.files) == 'docx' || formatFiles(scope.row.files) == 'xlsx' || formatFiles(scope.row.files) == 'pptx'" class="iconfont icon-document fxn-ft-24" @click="handleFile(scope.row.files.xurl)"></i>
                        <el-icon v-if="formatFiles(scope.row.files) == 'rar' || formatFiles(scope.row.files) == 'zip'" size="24" @click="handleFile(scope.row.files.xurl)"><Files /></el-icon>
                    </template>
                </el-table-column>
            </el-table>

            <div class="fxn-page">
                <el-pagination v-model:current-page="page" v-model:page-size="perPage" :page-sizes="[10, 50, 100, 200, 500]" layout="total, sizes, prev, pager, next" :total="count" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
            <!-- Page End -->
        </div>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                count: 1,
                page: 1,
                perPage: 10,
                loading: false,
                notesData: [],
            })

            //获取跟进
            const getList = () => {
                state.loading = true;
                proxy.$http.get('/oa/Lawcase/files',{
                    page: state.page,
                    perPage: state.perPage,
                    lawcase_id: router.currentRoute.value.query.id
                })
                .then(res=> {
                    state.loading = false;
                    const { code, msg ,data } = res;
                    if(code != 1){
                        return proxy.$msg.error(msg);
                    }else{
                        state.count = data.count;
                        state.page = data.page;
                        state.perPage = data.perPage;
                        state.notesData = data.list;
                    }
                })
            }

            //打开附件
            const handleFile = (file) => {
                window.open(file);
            }

            //格式化附件
            const formatFiles = (item) => {
                if(item){
                    return item.xext
                }
            }

            //转换文件名称
            const changeFile = (item) => {
                if(item){
                    return item.name
                }
            }

            //分页
            const handleSizeChange = (val) => {
                state.perPage = val;
                getList(state.page,state.perPage);
            }

            //页码
            const handleCurrentChange = (val) => {
                state.page = val;
                getList(state.page,state.perPage);
            }
            
            //Dom加载
            onMounted(()=>{
                getList();
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                getList,
                
                //组件方法
                handleFile,
                formatFiles,
                changeFile,
                handleSizeChange,
                handleCurrentChange,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
</style>